<template>
  <div :class="['breadcrumb-box mask-image', !globalStore.breadcrumbIcon && 'no-icon']">
    <el-breadcrumb separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
          <div
            class="el-breadcrumb__inner is-link"
            :class="{ 'item-no-icon': !item.icon }"
            @click="onBreadcrumbClick(item, index)"
          >
            <!--            <el-icon v-if="item.icon && globalStore.breadcrumbIcon" class="breadcrumb-icon">-->
            <!--              <component :is="item.icon"></component>-->
            <!--            </el-icon>-->
            <span v-if="item.icon && globalStore.breadcrumbIcon" class="iconfont icon-shouye"></span>
            <span class="breadcrumb-title" v-if="item.name">{{ item.name }}</span>
          </div>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { HOME_URL } from "@/config";
import { useRoute, useRouter } from "vue-router";
import { useAuthStore } from "@/stores/modules/auth";
import { useGlobalStore } from "@/stores/modules/global";

const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();
const globalStore = useGlobalStore();

const breadcrumbList = computed(() => {
  const r: any = route;
  let breadcrumbData = authStore.breadcrumbListGet[r.matched[r.matched.length - 1].name] ?? [];
  // 🙅‍♀️不需要首页面包屑可删除以下判断
  if (breadcrumbData[0] && breadcrumbData[0].name !== HOME_URL) {
    const homeKey = Object.keys(authStore.breadcrumbListGet)[0];
    breadcrumbData = [
      {
        path: authStore.breadcrumbListGet[homeKey][0]["path"],
        icon: "HomeFilled",
        name: "",
        key: authStore.breadcrumbListGet[homeKey][0]["key"]
      },
      ...breadcrumbData
    ];
  }
  return breadcrumbData;
});

// Click Breadcrumb
const onBreadcrumbClick = (item: Menu.MenuOptions, index: number) => {
  if (index !== breadcrumbList.value.length - 1) {
    // router.push({ name: item.key }).then(() => {
    //   window.location.reload();
    // });
    router.push({ name: item.key });
  }
};
</script>

<style scoped lang="scss">
.breadcrumb-box {
  display: flex;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 2px;
  padding-left: 24px;
  overflow: hidden;
  background: var(--el-bg-color-page);
  mask-image: none;
  .el-breadcrumb {
    font-size: 16px;
    white-space: nowrap;
    :deep(.el-breadcrumb__item) {
      position: relative;
      display: inline-block;
      .iconfont {
        margin-right: 0;
      }
      &:last-child {
        .el-breadcrumb__inner {
          color: var(--el-text-color-primary) !important;
        }
      }
      .item-no-icon {
        transform: translateY(-3px);
      }
      .el-breadcrumb__inner {
        display: inline-flex;
        color: var(--el-icon-color) !important;
        transform: translateY(0);
        &.is-link {
          color: var(--el-header-text-color);
          &:hover {
            color: var(--el-color-primary);
          }
        }
        .breadcrumb-icon {
          margin-top: 1px;
          margin-right: 6px;
          font-size: 16px;
        }
      }
      .el-breadcrumb__separator {
        margin: 0 8px;
        color: var(--el-icon-color) !important;
      }
      &:last-child .el-breadcrumb__inner,
      &:last-child .el-breadcrumb__inner:hover {
        color: var(--el-header-text-color-regular);
      }
      :deep(.el-breadcrumb__separator) {
        transform: translateY(-1px);
      }
    }
  }
}
.no-icon {
  .el-breadcrumb {
    .el-breadcrumb__item {
      top: -2px;
      :deep(.el-breadcrumb__separator) {
        top: 4px;
      }
      .item-no-icon {
        transform: translateY(0);
      }
    }
  }
}
</style>
